<template>
  <div class="container">
    <div class="bj2"></div>
    <video class="videodiv" src="@/assets/video/bg-video.d2d602a9.mp4" loop="loop" muted autoplay="true"></video>
    <el-form :model="loginFrom" :rules="rules" ref="loginFrom" label-width="100px" class="demo-ruleForm">
      <i class="jiaobiao iconfont icon-erweimajiaobiao"></i>
      <h1 class="title">crm管理系统</h1>
      <componLogin @SyncLoginfom="loginFromSync" @submit="submit" ref="getloginCaptcha"></componLogin>
      <!-- <qrLogin></qrLogin> -->
      <!-- <smsLogin></smsLogin> -->
    </el-form>
  </div>
</template>
<script>
import componLogin from "./commonLogin.vue";
import * as api from "@/api/users.js";
// import qrLogin from "./qrLogin.vue";
// import smsLogin from "./smsLogin.vue";
var validateUsername = (rule, value, callback) => {
  // console.log(rule)
  // console.log(value)
  //用户名正则，3到16位（字母，数字，下划线，减号）
  var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
  if (uPattern.test(value)) {
    callback();
  } else {
    callback("账号由3-16位字母数字");
  }
};
var validatePassword = (rule, value, callback) => {
  var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
  if (uPattern.test(value)) {
    callback();
  } else {
    callback("密码由3-16位字母数字");
  }
};
var validateCatcha = (rule, value, callback) => {
  let arr = /^[0-9a-zA-Z]{5}$/;
  if (arr.test(value)) {
    callback();
  } else {
    callback("请输入5位数验证码");
  }
};
export default {
  data() {
    return {
      loginFrom: {
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCatcha, trigger: "blur" }],
      },
    };
  },
  components: { componLogin },
  methods: {
    loginFromSync(nweLoginfrom) {
      this.loginFrom = nweLoginfrom;
    },
    submit() {
      this.$refs["loginFrom"].validate((valid) => {
        if (valid) {
          // 校验验证码是否正确
          api.jiaoyanCaptcha(this.loginFrom.captcha)
          .then(async res=>{
            // 登入
            // 1.获取后台的验证码
            // 2.进行本地校验
            // 3.本地校验通过=>先校验验证码
            // 4.验证码通过再校验用户名和密码
            // 5.成功和失败
            // 本地校验通过
            if(res.data.state){
              // 验证码通过
              // 解构出来
              let {username,password} = this.loginFrom
              // 调用loginUserName传参username,password
              let res = await api.loginuserName(username,password);
              if(res.data.state){
                // 登入成功
                // 1.存储token
              }
            }else{
              // 验证码不通过
              console.log("验证码错误")
              // 重新获取验证码
              this.$refs['getloginCaptcha'].getCaptcha()
            }
          // alert("submit!");
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("123");
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  .videodiv {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
  }

  .bj2 {
    width: 20%;
    height: 60%;
    background-image: url("../../assets/bg2.fc58c850.png");
    background-repeat: no-repeat;
    background-size: 100%;
    position: fixed;
    top: 35%;
    left: 20%;
    z-index: 1;
    opacity: 0.5;
  }
}

.el-form {
  width: 370px;
  height: 440px;
  border-radius: 3%;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  right: 5%;
  top: 20%;

  .title {
    color: white;
    text-align: center;
    margin-top: 20px;
  }

  .jiaobiao {
    font-size: 60px;
    position: absolute;
    color: #fff;
    right: -1px;
    top: -1px;
    cursor: pointer;
    opacity: 0.7;
  }
}
</style>
